import CartTabScreen from '@/src/pages/Cart/index';
import CategoryTabScreen from '@/src/pages/Category/index';
import HomeTabScreen from '@/src/pages/Home/index';
import UserCenterTabScreen from '@/src/pages/My/index';
import { Ionicons } from '@expo/vector-icons'; // 如果你使用 Expo
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import React from 'react';
// 定义 Ionicons 支持的图标名类型
type IconName = keyof typeof Ionicons.glyphMap;
const Tab = createBottomTabNavigator();
const TabNavigator = () => {
  return (
    <Tab.Navigator
      screenOptions={({ route }) => ({
        tabBarIcon: ({ focused, color, size }) => {
          let iconName: IconName;
          if (route.name === 'Home') {
            iconName = focused ? 'home' : 'home-outline';
          } else if (route.name === 'Category') {
            iconName = focused ? 'list' : 'list-outline';
          } else if (route.name === 'Cart') {
            iconName = focused ? 'cart' : 'cart-outline';
          } else if (route.name === 'My') {
            iconName = focused ? 'person' : 'person-outline';
          } else {
            iconName = 'help-circle-outline'; // 默认图标，防止未定义
          }
          return <Ionicons name={iconName} size={size} color={color} />;
        },
        tabBarActiveTintColor: '#FF3000',
        tabBarInactiveTintColor: 'gray',
        headerShown: false, // 隐藏顶部导航栏
        tabBarStyle: {
          paddingBottom: 0,
          paddingTop: 0,
          height: 55, // 固定高度
        },
        safeAreaInsets: { bottom: 0 }, // 忽略安全区域底部影响
      })}
    >
      <Tab.Screen name="Home" component={HomeTabScreen} />
      <Tab.Screen name="Category" component={CategoryTabScreen} />
      <Tab.Screen name="Cart" component={CartTabScreen} />
      <Tab.Screen name="My" component={UserCenterTabScreen} />
    </Tab.Navigator>
  );
};
export default TabNavigator;
